import { React, Fragment, useState, useEffect, useRef } from 'react';
import { Table, Button, Space, Input, Modal, Select, DatePicker, Radio, Form,message} from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import '../StaffSet/Staffset.css'
import { inject, observer } from 'mobx-react';

const { Option } = Select;
const mapFieldToChinese = {
  id: '序号',
  namess: '姓名',
  userBranch: '所属分店',
  userId: '员工编码',
  userName: '组名',
  nameId: '用户名',
  role: '角色',
  identityId: '身份证号',
  phone: '联系电话',
  state: '当前状态',

}

// 成功提示框
const success = (value) => {
  message.success(value);
};
// 失败提示
const error = (value) => {
  message.error(value);
};

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name,
  }),
};

function Staffset(props) {



  const [add, setAdd] = useState(false);
  const [loading, setLoading] = useState(false)
  const [id, setId] = useState()
  const [addEdit, setAddEdit] = useState('')
  //修改添加
  let obj = '';
  function addEditInfo(fun) {
    let values = obj
    values.id = id
    values.fun = fun
    props.StaffMobx.StaffMobxaddedit(values).then((res) => {
      if (res.code == 200) {
        console.log(res.code)
        success(res.msg)
      }
    }).catch((err) => {
      console.log(err);
      error(err.msg)
    })
    getList()
  }

  const [form] = Form.useForm();
  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    //fieldsValue即为表单内的值
    obj = fieldsValue;
    addEditInfo(addEdit);
    console.log(obj);
    console.log("okHandle -> fieldsValue", fieldsValue)
    form.resetFields();
  };
  //删除
  const [del, setDel] = useState(false);
  function delInfo() {
    let values = {
      id: id
    }
    props.StaffMobx.delStaffset(values).then((res) => {
      console.log(res);
      if (res.code == 200) {
        console(res.msg)
        success(res.msg)
      }
      getList()
    }).catch((err) => {
      console.log(err);
      error(err.msg)
    })
  }
  //查询
  const searchRef = useRef()
  function searchInfo() {
    let values = {
      namess: searchRef.current.state.value
    }
    props.StaffMobx.searchStffset(values).then((res) => {
      if (res.code == 200) {
        console.log(res.data);
        setData(res.data)
        success(res.msg)
      }
    }).catch((err) => {
      console.log(err);
      error(err.msg)
    })
  }
  //渲染
  const [selectionType, setSelectionType] = useState('checkbox');
  const [columns, setColumns] = useState([])

  const [data, setData] = useState([]);
  function getList() {
    props.StaffMobx.StaffMobxList().then((res) => {
      let keys = Object.keys(res.data[0]);
      let cols = keys.map(item => {
        if(item == 'role'){
          return {
              width: 140,
              title: mapFieldToChinese[item],
              dataIndex: item,
              key: item,
              align: 'center',
              render: (val)=>{
                  if(val == 0){
                      return (
                          <span>销售</span>
                      )
                  }else{
                      return (
                          <span>经理</span>
                      )
                  }
              }
          }
        } 
        else if(item == 'userBranch'){
          return {
            width: 140,
            title: mapFieldToChinese[item],
            dataIndex: item,
            key: item,
            align: 'center',
            render: (val)=>{
                if(val == 0){
                    return (
                        <span>望京分店</span>
                    )
                }else if(val == 1){
                    return (
                        <span>北京分店</span>
                    )
                }
            }
        }
        } 
        else if(item == 'userName'){
          return {
            width: 140,
            title: mapFieldToChinese[item],
            dataIndex: item,
            key: item,
            align: 'center',
            render: (val)=>{
                if(val == 0){
                    return (
                        <span>A组</span>
                    )
                }else if(val == 1){
                    return (
                        <span>B组</span>
                    )
                }
            }
        }
        } 
        return {
          width: 170,
          title: mapFieldToChinese[item],
          dataIndex: item,
          key: item,
          align: 'center'
        }
      })
      cols.push({
        width: 210,
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        align: 'center',
        fixed: 'right',
        render: () => {
          return (
            <Space>
              <Button size='small' type='primary' onClick={() => { setAdd(true); setAddEdit(1) }}>修改</Button>
              <Button size='small' type='danger' onClick={() => { setDel(true) }}>删除</Button>
            </Space>
          )
        }
      })
      setColumns(cols)
      setData(res.data)
      
    }).catch((err) => {
      console.log(err);
    })
  }
  useEffect(() => {
 
    getList()
   
  }, [])

  return (
    <Fragment>
      <div>
        <h2>员工资料</h2>
      </div>
      <div className='header'>
        <div className='she'>
          <Button type='primary' onClick={() => { setAdd(true); setAddEdit(0) }} >添加员工</Button>
          <Button type='primary'>设置分组</Button>
        </div>
        <div>
          <Input className='search' placeholder="请输入员工姓名" ref={searchRef} prefix={<SearchOutlined />} />
          <Button type='primary' onClick={searchInfo}>查询</Button>
        </div>

      </div>
      <Table
  
        rowSelection={{
          type: selectionType,
          ...rowSelection,

        }}
        columns={columns} dataSource={data} rowKey={(record) => `id${record.id}`} pagination={{ pageSize: 50 }} scroll={{ y: 240 }}
        onRow={(record) => {
          return {
            onClick: () => {
              setId(record.id)
            }
          }
        }
        }>

      </Table>

      <Modal
        title="详细信息"
        centered
        visible={add}
        okText='确定'
        cancelText='取消'
        onOk={() => {
          setAdd(false);
          okHandle();
         
          // addEditInfo(addEdit);
        }}
        onCancel={() => { setAdd(false); }}
        width={1000}
      >
        <Form
          form={form}
          name="customerInfo"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          autoComplete="off"
        >
          <div className='addModal'>
            <div>
              <Form.Item
                label="员工编码："
                name="userId"
                rules={[{ required: true, message: '请输入对应内容' }]}
              >
                <Input placeholder='请输入' />
              </Form.Item>

            </div>

            <div>
              <Form.Item
                label="用户名："
                name="nameId"
                rules={[{ required: true, message: '请输入对应内容' }]}
              >
                <Input placeholder='请输入' />
              </Form.Item>

            </div>

            <div>
              <Form.Item
                label="角色名称："
                name="role"
                rules={[{ required: true, message: '请选择' }]}
              >

                <Select style={{ width: 170, textAlign: 'left' }}  >
                  <Option value="0">销售</Option>
                  <Option value="1">经理</Option>
                </Select>
              </Form.Item>

            </div>

            <div>
              <Form.Item
                label="员工姓名："
                name="namess"
                rules={[{ required: true, message: '请输入对应内容' }]}
              >
                <Input placeholder='请输入' />
              </Form.Item>
            </div>

            <div>
              <Form.Item
                label="身份证号："
                name="identityId"
                rules={[{ required: true, message: '请输入对应内容' }]}
              >
                <Input placeholder='请输入' />
              </Form.Item>
            </div>
            <div>
              <Form.Item
                label="联系电话："
                name="phone"
                rules={[{ required: true, message: '请输入对应内容' }]}
              >
                <Input placeholder='请输入' />
              </Form.Item>

            </div>
            <div>
              <Form.Item
                label="所属分店："
                name="userBranch"
                rules={[{ required: true, message: '请输入对应内容' }]}
              >

                <Select style={{ width: 170, textAlign: 'left' }}  >
                  <Option value="0">望京分店</Option>
                  <Option value="1">北京分店</Option>
                </Select>
              </Form.Item>

            </div>
            <div>
              <Form.Item
                label="所属分组："
                name="userName"
                rules={[{ required: true, message: '请选择分组' }]}
              >

                <Select style={{ width: 170, textAlign: 'left' }}  >
                  <Option value="0">A组</Option>
                  <Option value="1">b组</Option>
                </Select>
              </Form.Item>

            </div>

          </div>
        </Form>
      </Modal>
      {/* 删除 */}
      <Modal title="删除提示"
        visible={del}
        okText='确定'
        cancelText='取消'
        onOk={() => {
          delInfo()
          setDel(false)
        }}
        onCancel={() => { setDel(false) }}
      >
        <p>你确定要删除这条信息吗</p>
      </Modal>
    </Fragment>
  );
}

export default inject('StaffMobx')(observer(Staffset));

